<template>
  <div style="padding-bottom: 60px;">
    <h3>
      旬工作汇总
    </h3>
    <div style="margin-top: 16px;width: 100%;">
      <Form inline ref="formInline">
        <FormItem>
          <DatePicker v-width="180" v-model="params.date" type="month" placeholder="选择月份" @on-change="changeParamsBtn"
            :clearable="false">
          </DatePicker>
        </FormItem>
        <FormItem>
          <Select v-model="params.department" v-width="220" placeholder="选择项目" @on-change="changeParamsBtn">
            <Option v-for="(item,index) in departmentList" :key="index" :value="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <RadioGroup v-model="params.btn" type="button" @on-change="changeParamsBtn('changeBtn')">
            <Radio v-for="(item,index) in btnList" :key="index" :label="item.label"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="openAdd">录入</Button>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="openEdit" v-if="canEdit">编辑</Button>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="exportData">导出</Button>
        </FormItem>
      </Form>
      <tableView :tableDate="tableDate"></tableView>
      <Modal v-model="addModal" :title="modalTitle" width="900" :mask-closable="false" @on-cancel="cancel">
        <Form ref="addForm">
          <FormItem>
            <Row :gutter="48">
              <Col span="6">
              <Select v-model="addParams.projectId" v-width="220" placeholder="选择项目" clearable
                :disabled="modalTitle === '编辑本旬工作汇总'">
                <Option v-for="(item,index) in departmentList" :key="index" :value="item.value">{{item.label}}</Option>
              </Select>
              </Col>
              <Col span="6">
              <DatePicker @on-change="changeTime" v-width="220" v-model="addParams.dates" type="month" placeholder="月份"
                :clearable="false" :disabled="true">
              </DatePicker>
              </Col>
              <Col span="6">
              <Select :disabled="modalTitle === '编辑本旬工作汇总'" v-model="addParams.date" v-width="220" placeholder="选择旬"
                clearable @on-change="changeXun">
                <Option v-for="(item,index) in dateList" :key="index" :value="item.value">{{item.label}}</Option>
              </Select>
              </Col>
            </Row>
          </FormItem>
          <div style="display: flex;align-items: center;margin-bottom: 30px;margin-left: 10px;">
            <Badge status="processing" />
            <div style="font-weight: 600;">任务完成经验总结</div>
          </div>
          <FormItem label="完成原因分析：" :label-width="120">
            <Input v-model="addParams.analyse" type="textarea" />
          </FormItem>
          <div style="display: flex;align-items: center;margin-bottom: 30px;margin-left: 10px;">
            <Badge status="processing" />
            <div style="font-weight: 600;">任务未完成核心指标分析</div>
          </div>
          <FormItem label="指标名称1：" :label-width="120">
            <Input v-model="addParams.atOne" />
          </FormItem>
          <Row>
            <Col span="8">
            <FormItem label="指标现状值：" :label-width="120">
              <Input v-model="addParams.statusNum" />
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="指标目标值：" :label-width="120">
              <Input v-model="addParams.endNum" />
            </FormItem>
            </Col>
          </Row>
          <FormItem label="差距原因分析：" :label-width="120">
            <Input v-model="addParams.whyAnalyse" type="textarea" />
          </FormItem>
          <FormItem label="指标名称2：" :label-width="120">
            <Input v-model="addParams.atTwo" />
          </FormItem>
          <Row>
            <Col span="8">
            <FormItem label="指标现状值：" :label-width="120">
              <Input v-model="addParams.statusNumTwo" />
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="指标目标值：" :label-width="120">
              <Input v-model="addParams.endNumTwo" />
            </FormItem>
            </Col>
          </Row>
          <FormItem label="差距原因分析：" :label-width="120">
            <Input v-model="addParams.whyAnalyseTwo" type="textarea" />
          </FormItem>
          <div style="font-weight: 600;margin-bottom: 20px;">
            下一期重点工作计划
          </div>
          <Row>
            <Col span="8">
            <FormItem label="基础目标：" :label-width="120">
              <Input v-model="addParams.basis" />
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="冲刺目标：" :label-width="120">
              <Input v-model="addParams.sprint" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="14">
            <FormItem label="关键任务1：" :label-width="120">
              <Input v-model="addParams.basisOne" />
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="完成时间：" :label-width="120">
              <Input v-model="addParams.basisDateOne" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="14">
            <FormItem label="关键任务2：" :label-width="120">
              <Input v-model="addParams.basisTwo" />
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="完成时间：" :label-width="120">
              <Input v-model="addParams.basisDateTwo" />
            </FormItem>
            </Col>
          </Row>
          <FormItem label="需协调事项：" :label-width="120">
            <Input v-model="addParams.coordinate" type="textarea" />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="addModal = false">取消</Button>
          <Button type="primary" :loading="modal_loading" @click="addSend">确定</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
  import { getPersonalInfoPro, getWorkSummaryList, setAllWork, setTransformationReport, exportSummaryData } from "@/api/TApi/index.js";
  import Setting from "@/setting";
  import tableView from "./tableView.vue"
  export default {
    components: {
      tableView
    },
    data() {
      return {
        departmentList: [],
        tableDate: {},
        modal_loading: false,
        dateList: [],
        modalTitle: "",
        //录入字段
        addParams: {
          dates: "",
          projectId: "",
          date: "",
          analyse: "",
          atOne: "",
          statusNum: "",
          endNum: "",
          whyAnalyse: "",
          atTwo: "",
          statusNumTwo: "",
          endNumTwo: "",
          whyAnalyseTwo: "",
          basis: "",
          sprint: "",
          basisDateOne: "",
          basisOne: "",
          basisTwo: "",
          basisDateTwo: "",
          coordinate: ""
        },
        addModal: false,
        btnList: [
          {
            label: "上旬",
            value: 1
          },
          {
            label: "中旬",
            value: 2
          },
          {
            label: "下旬",
            value: 3
          },
        ],
        params: {
          date: "",
          department: "",
          btn: "",
        }
      };
    },
    methods: {
      cancel() {
        this.addParams = {
          projectId: "",
          date: "",
          analyse: "",
          atOne: "",
          statusNum: "",
          endNum: "",
          whyAnalyse: "",
          atTwo: "",
          statusNumTwo: "",
          endNumTwo: "",
          whyAnalyseTwo: "",
          basis: "",
          sprint: "",
          basisDateOne: "",
          basisOne: "",
          basisTwo: "",
          basisDateTwo: "",
          coordinate: ""
        }
      },
      changeXun() {
        let time = new Date().getDate()
        if (time === 1 && this.addParams.date === 3) {
          this.addParams.dates = this.$Date().subtract(1, 'month').format("YYYY-MM")
        } else {
          this.addParams.dates = this.$Date(new Date()).format("YYYY-MM")
        }
      },
      changeTime() {
        this.dateList = []
        this.changeBtn('change')
      },
      exportData() {
        exportSummaryData({
          monthly_type: this.btnList.filter(ee => ee.label === this.params.btn)[0].value,
          date: this.params.date ? this.$Date(this.params.date).format("YYYY-MM") : "",
          project_id: this.params.department,
        }).then(res => {
          const link = document.createElement('a')
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.download = '工作汇总' //下载的文件名
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      },
      addSend() {
        let arr = []
        for (let key in this.addParams) {
          arr.push(this.addParams[key])
        }
        let flag = arr.some(ee => ee !== "" && ee !== undefined)
        if (!flag) {
          this.$Message.warning("请至少填入一项")
          return false
        } else {
          let params = {
            date: this.addParams.dates ? this.$Date(this.addParams.dates).format("YYYY-MM-DD") : "",
            monthly_type: this.addParams.date,
            project_id: this.addParams.projectId,
            completion_reason: this.addParams.analyse,
            indicator_one: this.addParams.atOne,
            indicator_one_complete: this.addParams.statusNum,
            indicator_one_target: this.addParams.endNum,
            indicator_one_disparity_reason: this.addParams.whyAnalyse,
            indicator_two: this.addParams.atTwo,
            indicator_two_complete: this.addParams.statusNumTwo,
            indicator_two_target: this.addParams.endNumTwo,
            indicator_two_disparity_reason: this.addParams.whyAnalyseTwo,
            basic_target: this.addParams.basis,
            sprint_target: this.addParams.sprint,
            task_one: this.addParams.basisOne,
            task_one_complete_time: this.addParams.basisDateOne,
            task_two: this.addParams.basisTwo,
            task_two_complete_time: this.addParams.basisDateOne,
            remark: this.addParams.coordinate,
          }
          if (this.modalTitle === "编辑本旬工作汇总") {
            params.id = this.tableDate.id
          }
          this.modal_loading = true
          setAllWork(params).then(res => {
            let copyId = this.addParams.projectId
            this.addParams = {
              projectId: "",
              date: this.$Date(new Date()).format("YYYY-MM"),
              analyse: "",
              atOne: "",
              statusNum: "",
              endNum: "",
              whyAnalyse: "",
              atTwo: "",
              statusNumTwo: "",
              endNumTwo: "",
              whyAnalyseTwo: "",
              basis: "",
              sprint: "",
              basisDateOne: "",
              basisOne: "",
              basisTwo: "",
              basisDateTwo: "",
              coordinate: ""
            }
            if (this.modalTitle === "编辑本旬工作汇总") {
              this.$Message.success("编辑成功")
              this._getPersonalInfoPro(copyId)
            } else {
              this.$Message.success("录入成功")
            }

            this.addModal = false
          }).finally(() => {
            this.modal_loading = false
          })
        }
      },
      openAdd() {
        this.modalTitle = "录入本旬工作汇总"
        this.addModal = true
      },
      openEdit() {
        this.modalTitle = "编辑本旬工作汇总"
        this.addParams.projectId = this.tableDate.project_id
        this.addParams.date = +this.tableDate.monthly_type
        this.addParams.dates = this.tableDate.monthly
        this.addParams.analyse = this.tableDate.completion_reason
        this.addParams.atOne = this.tableDate.indicator_one
        this.addParams.statusNum = this.tableDate.indicator_one_complete
        this.addParams.endNum = this.tableDate.indicator_one_target
        this.addParams.whyAnalyse = this.tableDate.indicator_one_disparity_reason
        this.addParams.atTwo = this.tableDate.indicator_two
        this.addParams.statusNumTwo = this.tableDate.indicator_two_complete
        this.addParams.endNumTwo = this.tableDate.indicator_two_target
        this.addParams.whyAnalyseTwo = this.tableDate.indicator_two_disparity_reason
        this.addParams.basis = this.tableDate.basic_target
        this.addParams.sprint = this.tableDate.sprint_target
        this.addParams.basisOne = this.tableDate.task_one
        this.addParams.basisTwo = this.tableDate.task_two
        this.addParams.basisDateOne = this.tableDate.task_one_complete_time
        this.addParams.basisDateTwo = this.tableDate.task_two_complete_time
        this.addParams.coordinate = this.tableDate.remark
        this.addModal = true
      },
      _getWorkSummaryList() {
        let params = {
          project_id: this.params.department,
          date: this.params.date ? this.$Date(this.params.date).format("YYYY-MM") : "",
          monthly_type: this.btnList.filter(ee => ee.label === this.params.btn)[0].value
        }
        getWorkSummaryList(params).then(res => {
          this.tableDate = res
        })
      },
      changeParamsBtn(type) {
        this.changeBtn('change')
        this.reset = Math.random() * 100
        this._getWorkSummaryList()
      },
      _getPersonalInfoPro(copyId) {
        getPersonalInfoPro().then((res) => {
          this.departmentList = res;
          this.params.department = copyId ? copyId : res.length ? res[0].value : "";
          this._getWorkSummaryList()
        });
      },
      changeBtn(type) {
        let month = new Date().getMonth() + 1
        let month1 = new Date().getMonth() + 1
        let time = new Date().getDate()
        if (!type) {
          if (time < 11) {
            this.params.btn = "上旬"
          } else if (time >= 11 && time < 21) {
            this.params.btn = "中旬"
          } else {
            this.params.btn = "下旬"
          }
        }
        let year = new Date().getFullYear()
        let year1 = new Date().getFullYear()
        if (time === 1 && year === year1) {
          this.dateList = [
            {
              value: 1,
              label: "上旬"
            },
            {
              value: 3,
              label: "下旬"
            },
          ]
        }
        if (time < 11 && time !== 1 && month === month1 && year === year1) {
          this.dateList = [
            {
              value: 1,
              label: "上旬"
            }
          ]
        }
        if (time === 11 && month === month1 && year === year1) {
          this.dateList = [
            {
              value: 1,
              label: "上旬"
            },
            {
              value: 2,
              label: "中旬"
            },
          ]
        }
        if (time > 11 && time < 21 && month === month1 && year === year1) {
          this.dateList = [
            {
              value: 2,
              label: "中旬"
            }
          ]
        }
        if (time === 21 && month === month1 && year === year1) {
          this.dateList = [
            {
              value: 2,
              label: "中旬"
            },
            {
              value: 3,
              label: "下旬"
            },
          ]
        }
        if ((time > 21 && month === month1 && year === year1)) {
          this.dateList = [
            {
              value: 3,
              label: "下旬"
            },
          ]
        }
      },
    },
    computed: {
      canEdit() {
        let time = new Date().getDate()
        if ((time < 11 && this.params.btn === '上旬') || (time >= 11 && time < 21 && this.params.btn === '中旬') || (time >= 21 && this.params.btn === '下旬')) {
          return true
        } else {
          return false
        }
      }
    },
    created() {
      // this.addParams.dates = this.$Date(new Date()).format("YYYY-MM")
      this.params.date = this.$Date(new Date()).format("YYYY-MM")
      this.changeBtn()
      this._getPersonalInfoPro();
    },
  };
</script>
<style scoped>
  /deep/ input::-webkit-outer-spin-button,
  /deep/ input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  /deep/ input[type="number"] {
    -moz-appearance: textfield;
  }
</style>